// @use 'sass:math';
// @use 'sass:map';
// @use 'sass:color';
@use 'element-plus/theme-chalk/dark/css-vars.css';

:root {
  // Element Plus 变量覆盖
  --el-color-primary: hsl(var(--primary));
  --el-color-success: hsl(var(--success));
  --el-color-warning: hsl(var(--warning));
  --el-color-danger: hsl(var(--danger));
  --el-color-error: hsl(var(--danger));

  // 衍生色
  --el-color-primary-light-3: color-mix(in srgb, hsl(var(--primary)) 85%, white);
  --el-color-primary-light-5: color-mix(in srgb, hsl(var(--primary)) 65%, white);
  --el-color-primary-dark-2: color-mix(in srgb, hsl(var(--primary)) 85%, black);

  // 文本颜色
  --el-text-color-primary: rgb(0 0 0 / 88%);
  --el-text-color-regular: rgb(0 0 0 / 65%);
  --el-text-color-secondary: rgb(0 0 0 / 45%);
  --el-text-color-placeholder: rgb(0 0 0 / 25%);
  --el-text-color-disabled: rgb(0 0 0 / 25%);

  // 边框
  --el-border-radius-base: 6px;
  --el-border-radius-small: 4px;
  --el-border-color: rgb(229 229 229 / 100%);
  --el-border-color-light: color-mix(in srgb, var(--el-border-color) 60%, white);

  // 背景色
  --el-bg-color: #fff;
  --el-bg-color-page: #f5f5f5;
  --el-bg-color-overlay: #fff;

  // 禁用状态
  --el-disabled-bg-color: rgb(0 0 0 / 4%);
  --el-disabled-text-color: rgb(0 0 0 / 25%);

  // 字体
  --el-font-size-base: var(--font-size-base);
  --el-font-size-small: 0.75rem;
  --el-font-size-large: 1rem;

  // popver
  --el-popper-border-radius: 2rem;

  // input
  .el-input {
    --el-input-bg-color: hsl(var(--background-input));
  }

  // table
  .el-table {
    --el-table-header-bg-color: #f4f7fa;
    --el-table-text-color: var(--el-text-color-primary);

    thead {
      --el-table-header-text-color: hsl(var(--text-primary));
    }
  }

  // radio
  .el-radio {
    --el-radio-input-width: 1rem;
    --el-radio-input-height: 1rem;
  }

  .el-select-dropdown__item.is-selected {
    background-color: hsl(var(--primary-sub));
  }

  // select
  .el-select-dropdown__list {
    @apply p-0.25rem;

    .el-select-dropdown__item {
      border-radius: 0.25rem;
    }
  }
  // checkbox
  .el-checkbox__inner {
    @apply w-1rem h-1rem;

    &::after {
      @apply border-2px;
    }
  }
}

// 暗黑模式
html.dark {
  // 文本颜色
  --el-text-color-primary: rgb(255 255 255 / 85%);
  --el-text-color-regular: rgb(255 255 255 / 65%);
  --el-text-color-secondary: rgb(255 255 255 / 45%);
  --el-text-color-placeholder: rgb(255 255 255 / 25%);

  // 背景色
  --el-bg-color: hsl(var(--card));
  --el-bg-color-page: #000;
  --el-bg-color-overlay: #1f1f1f;

  // 边框
  --el-border-color: rgb(253 253 253 / 12%);
  --el-border-color-light: #303030;

  // 禁用状态
  --el-disabled-bg-color: rgb(255 255 255 / 8%);
  --el-disabled-text-color: rgb(255 255 255 / 25%);

  // 填充色
  --el-fill-color-light: hsl(var(--primary-sub));
  // input
  .el-input {
    --el-input-bg-color: hsl(var(--background-input));
  }

  // table
  .el-table {
    --el-table-header-bg-color: hsl(var(--card-accent));
  }
}
